<template>
	<view class="big">
		<view class="big-top">
			<view class="big-top-i">
				<u-icon name="checkmark-circle-fill" color="darkred"></u-icon>30天无忧退货
			</view>
			<view class="big-top-i">
				<u-icon name="checkmark-circle-fill" color="darkred"></u-icon>48小时快速退费
			</view>
			<view class="big-top-i">
				<u-icon name="checkmark-circle-fill" color="darkred"></u-icon>满88元免邮费
			</view>
		</view>
		<view class="goods">
			<view class="goods-l" v-for="(item, index) in cartList" :key="item.id">
				<view class="check">
					<u-checkbox shape="circle" @change="checkboxChange" v-model="item.checked">
					</u-checkbox>
				</view>
				<view class="oo">
					<u-swipe-action btn-width="150" :options="options">
						<view class="goods-r">
							<view style="display: inline-block;">
								<image :src="item.list_pic_url" style="width: 176rpx;height: 176rpx;"></image>
							</view>
							<view class="goods-i">
								<view style="margin-top: 30rpx;">
									{{item.goods_name}}
								</view>
								<view class="goods-text" style="color: darkred;">
									<text>￥{{item.retail_price.toFixed(2)}}元</text>
									<text style="color: black;margin-right: 20rpx;">X{{item.number}}</text>
								</view>
							</view>
						</view>
					</u-swipe-action>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="bianji">
				累计共{{goodsCount}}件商品，可点击<u-button size="mini" type="success">编辑</u-button>按钮进行商品数量修改
			</view>
			<view class="zongjia">
				<u-checkbox shape="circle" v-model="allchecked">全选</u-checkbox>
				<view class="heji">合计：<text style="color: red;">￥{{checkedGoodsAmount.toFixed(2)}}元</text></view>
				<u-button type="error" size="medium" shape="circle">立即购买</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		checkToken
	} from '../../util/router.js'
	export default {
		data() {
			return {
				cartList: [],
				token: "",
				goodsCount: 0,
				goodsAmount: 0,
				checkedGoodsCount: 0,
				checkedGoodsAmount: 0,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		methods: {
			checkboxChange(e) {
				// this.$request({

				// })
				console.log(e.value, 111);
			}
		},
		computed: {
			allchecked: {
				get() {
					return this.cartList.every(item => item.checked)
				},
				set(val) {
					this.cartList.forEach((item) => {
						item.checked = val
					})
				}
			}
		},
		onShow() {
			checkToken({
				pathForGoingBack: '/pages/cart/cart',
				cbIfHasToken: () => {
					let token = uni.getStorageSync("token");
					this.token = token
					this.$request({
						url: "cart/index",
						method: "GET",
						header: {
							"X-Nideshop-Token": this.token
						},
						successCb: res => {
							this.goodsCount = res.cartTotal.goodsCount
							this.goodsAmount = res.cartTotal.goodsAmount
							this.checkedGoodsCount = res.cartTotal.checkedGoodsCount
							this.checkedGoodsAmount = res.cartTotal.checkedGoodsAmount
							this.cartList = res.cartList
							this.cartList.forEach((item) => {
								if (item.checked == 1) {
									item.checked = true
								} else {
									item.checked = false
								}
							})
						}
					})
				}
			})
		},
		methods: {}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
		margin-bottom: 190rpx;
	}

	.big-top {
		display: flex;
		justify-content: space-between;
		background-color: #eee;
	}

	.big-top-i {
		padding: 12rpx 10rpx;
	}

	.goods {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		background-color: #fff;
	}

	.goods-l {
		display: flex;
		padding: 20rpx;
		width: 100%;
		border-bottom: 1px solid #eee;
	}

	.goods-r {
		display: flex;
		padding: 20rpx 0;
		width: 600rpx;
		background-color: #eee;
	}

	.goods-i {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods-text {
		display: flex;
		justify-content: space-between;
	}

	.check,
	u-checkbox {
		display: flex;
	}

	.oo {
		flex: 1;
		overflow: hidden;
		box-sizing: border-box;
		padding-left: 3rpx;
	}

	.footer {
		position: fixed;
		bottom: 100rpx;
	}

	.bianji {
		color: #f56723;
		background-color: #fff7cc;
		width: 750rpx;
		text-align: center;
		padding: 20rpx 0;
		font-size: 20rpx
	}

	.zongjia {
		display: flex;
		background-color: #fff;
		line-height: 100rpx;
		padding: 0 20rpx;
	}

	.zongjia .u-btn {
		margin-top: 15rpx;
	}

	.heji {
		flex: 1;
		text-align: right;
		text-indent: 2em;
		padding: 0 8rpx;
	}
</style>
